<template>
	<view class="home">
		<view class="header-tab">
			<view class="header-tab-left">
				<view class="header-tab-item" @click="selectFn(item)"
					:class="state.curHeadItem == item.id ? 'header-tab-item-cur' : ''"
					v-for="item in state.headList[prop.activeVal]" :key="item.id">{{
                        item.name }}
				</view>
			</view>
			<view class="header-tab-right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		getCurrentInstance,
		onMounted
	} from "vue"

	const prop = defineProps(['activeVal', 'curHeadItem'])
	const emit = defineEmits(["selectItemFn"])

	const state = reactive({
		headList: {
			0: [{
					id: 1, // 发现
					name: '发现'
				},
				{
					id: 2, // 附近
					name: '附近'
				},
			],
			1: [{
					id: 1, // 关注
					name: '关注'
				},
				{
					id: 2, // 推荐
					name: '推荐'
				},
				{
					id: 3, // 附近
					name: '附近'
				},
			]
		},
		curHeadItem: prop.curHeadItem || 1
	})

	const selectFn = (item) => {
		state.curHeadItem = item.id
		emit('selectItemFn', item.id)
	}
</script>

<style lang="scss" scoped>
	.header-tab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #fff;
		z-index: 999;
	}

	.header-tab-left {
		display: flex;
		align-items: flex-end;
		padding: 20rpx 0;

		.header-tab-item {
			width: 100rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #999999;
			text-align: center;
		}

		.header-tab-item-cur {
			font-size: 44rpx;
			font-weight: 600;
			color: #fdba00;
		}
	}
</style>
